﻿@charset "utf-8";
html,body{
    width:100%;
    height:100%;
}
.box{
    width:600px; 
    text-align:center;
    border:1px;
    margin:50px auto 0px auto;
    font-size:18px;
 
}

.loading1 {
    width: 50px;
    height: 40px;
    margin: 60px auto;
    text-align: center;
}

    .loading1 span {
        width: 5px;
        height: 100%;
        display: inline-block;
        background: #67CF22;
        ;
        animation: mymove 1.2s infinite ease-in-out;
        -webkit-animation: mymove 1.2s infinite ease-in-out;
        /*  
                mymove代表动画名字
                1.2s代表执行时间
                infinite表示一直循环执行
                ease-in-out表示先慢后快的缓动
            */
    }

    .loading1 > span:nth-child(2) {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }

    .loading1 > span:nth-child(3) {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }

    .loading1 > span:nth-child(4) {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }

    .loading1 > span:nth-child(5) {
        -webkit-animation-delay: -0.7s;
        animation-delay: -0.7s;
    }

@keyframes mymove {
    0% {
        transform: scaleY(0.4);
    }

    25% {
        transform: scaleY(1.0);
    }

    50% {
        transform: scaleY(0.4);
    }

    75% {
        transform: scaleY(0.4);
    }

    100% {
        transform: scaleY(0.4);
    }
}

@-webkit-keyframes mymove {
    0% {
        transform: scaleY(0.4);
    }

    25% {
        transform: scaleY(1.0);
    }

    50% {
        transform: scaleY(0.4);
    }

    75% {
        transform: scaleY(0.4);
    }

    100% {
        transform: scaleY(0.4);
    }
}